<template>
  <div>
    <el-dialog title="用户回收站" :visible.sync="trashVisible">
      <div class="trashBox">
        <span>已选择{{ num }}项</span>
        <template v-if="isExpend">
          <a @click="returnBack()">清空选择</a>
          <a @click="backData()">批量还原</a>

          <el-popconfirm placement="top" title="确定彻底删除?" @confirm="delTrue()">
            <a slot="reference" @click="delTrue()">批量删除</a>
          </el-popconfirm>

        </template>
      </div>
      <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column align="center" type="selection" width="55">
        </el-table-column>
        <el-table-column align="center" v-for="(item, index) in headerData" :key="index" :prop="item.prop"
          :label="item.label" :width="item.width">
          <template slot-scope="scope">
            <div v-if="item.pic">
              <el-image class="tablePic" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]">
              </el-image>
            </div>
            <div v-if="!item.pic">
              {{ tableData[scope.$index][item.prop] }}
            </div>
            <div v-if="item.operation">
              <div class="opertionTo">
                <span @click="backData(scope)"><i class="el-icon-refresh"></i> 还原用户</span>
                <span>|</span>

                <el-popconfirm placement="top" title="确定彻底删除?" @confirm="delTrue(scope)">
                  <span slot="reference">彻底删除</span>
                </el-popconfirm>




              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { trashTabledata, trashDataBack, trashDataDel } from "@/api/login";
export default {
  props: {
    // trashVisible: {
    //   type: Boolean,
    //   default: () => {
    //     return false;
    //   },
    // },
  },
  data() {
    return {
      trashVisible: false,
      num: 0,
      headerData: [
        {
          prop: "number",
          label: "#",
          width: "100px",
          sortable: true,
        },
        {
          prop: "username",
          label: "用户账号",

          sortable: true,
        },
        {
          prop: "realname",
          label: "用户姓名",
        },
        {
          prop: "avatar",
          label: "头像",

          slot: true,
          pic: true,
        },

        {
          prop: "orgCodeTxt",
          label: "部门",
        },
        {
          prop: "operation",
          label: "操作",
          width: "200",
          operation: true,
        },
      ],
      tableData: [],
      isExpend: false,
      idString: "",
    };
  },
  methods: {
    open() {
      let _self = this;
      _self.trashVisible = true;
    },
    //回收站数据获取
    trashTabledataSearch() {
      let _self = this;
      trashTabledata().then((res) => {
        console.log(res);
        if (res.code == 200) {
          let list = res.result;
          // console.log(list);
          let num = 1;
          _self.tableData = [];
          for (let item of list) {
            _self.tableData.push({
              number: num,
              id: item.id,
              username: item.username,
              realname: item.realname,
              avatar: item.avatar,
              sex: item.sex,
              birthday: item.birthday,
              phone: item.phone,
              orgCodeTxt: item.orgCodeTxt,
              departIds_dictText: item.departIds_dictText,
              status_dictText: item.status_dictText,
              operation: item.operation,
            });
            num++;
          }
          // console.log("新的tabledata", _self.tableData);
        }
      });
    },
    // 还原
    backData(scope) {
      let _self = this;
      if (_self.idString == "") {
        return this.$message("未选中需要还原项");
      } else {
        let data = {
          // userIds: scope.row.id
          userIds: _self.idString,
        };
        trashDataBack(data).then((res) => {
          console.log(res);
          if (res.code == 200) {
            _self.trashTabledataSearch();
            _self.$parent.searchFn()
          }
        });
      }
    },
    // 彻底删除
    delTrue(scope) {
      let _self = this;
      if (_self.idString == "") {
        return this.$message("未选中需要删除项");
      } else {
        let data = {
          // userIds: scope.row.id
          userIds: _self.idString,
        };
        trashDataDel(data).then((res) => {
          console.log(res);
          if (res.code == 200) {
            _self.trashTabledataSearch();
          }
        });
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.num = val.length;
      // console.log(val);
      if (val.length) {
        this.isExpend = true;
      } else {
        this.isExpend = false;
      }
      let list = [];
      for (let i of val) {
        list.push(i.id);
      }
      // console.log(list);
      this.idString = list.join(",");
      // console.log(this.idString);
    },
    returnBack() {
      this.trashTabledataSearch();
    },
  },
  mounted() {
    this.trashTabledataSearch();
  },
};
</script>

<style>
.opertionTo span {
  cursor: pointer;
  color: #409eff;
  margin: 0 5px;
}

.trashBox {
  margin-bottom: 10px;
}

.trashBox a {
  border-left: 1px solid rgb(237, 237, 237);
  padding-left: 20px;
  color: #409eff;
}
</style>